<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OCR提取文本</title>
    <script src="js/vue2@2.7.14.js"></script>
    <script src="js/fetch.umd@5.3.5.min.js"></script>
    <script src="js/element-ui@2.15.13.js"></script>
    <link rel="stylesheet" href="css/element-ui@2.15.13.css"/>
    <style>
        iframe {
            border: none;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="text-align: center;">
        <h1>OCR-识别提取内容</h1>
        <!--区分通用版和精确版-->
        <template>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="通用版" name="first">
                    <div>
                        <iframe src="general.html" width="100%" height="600px"></iframe>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="图像高精度" name="second">
                    <div>
                        <iframe src="image-accurate-basic.html" width="100%" height="600px"></iframe>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="图像高精度含位置版" name="third">
                    <div>
                        <iframe src="image-accurate-position.html" width="100%" height="600px"></iframe>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="PDF高精度" name="fourth">
                    <div>
                        <iframe src="pdf-accurate-basic.html" width="100%" height="600px"></iframe>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="PDF高精度含位置版" name="fifth">
                    <div>
                        <iframe src="pdf-accurate-position.html" width="100%" height="600px"></iframe>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="Office高精度" name="sixth">
                    <div>
                        <iframe src="office-accurate-basic.html" width="100%" height="600px"></iframe>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="Office高精度含位置版" name="seventh">
                    <div>
                        <iframe src="office-accurate-position.html" width="100%" height="600px"></iframe>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="特定场景精确识别" name="eighth">
                    <div>
                        待开放：身份证识别提取、日期识别提取、证书识别提取、签名识别提取、印章识别提取、网络图像文字识别等
                    </div>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>

</div>

<script>
    let Main = {
        data() {
            return {
                activeName: 'first'
            }
        },
        mounted() {

        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    }

    const Ctor = Vue.extend(Main);
    new Ctor().$mount('#app')
</script>
</body>
</html>